{include file="public/header" /}
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/admin/webupload/style.css">
<link href="/static/admin/css/select2.min.css" rel="stylesheet">
<style>
    .file-item{float: left; position: relative; width: 110px;height: 110px; margin: 0 20px 20px 0; padding: 4px;}
    .file-item .info{overflow: hidden;}
    .uploader-list{width: 100%; overflow: hidden;}
</style>
<body class="gray-bg">

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
    <form id="signupForm" method="post" action="">
        <input type="hidden" name="iconType" value="{$type}">
        <div class="modal-content animated bounceInRight">
            <div class="modal-header">
                <h4 class="modal-title">上传图片</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label>人物</label>
                    <select name="figure_id" class="form-control">
                        {foreach $figureList as $vo}
                            <option value="{$vo.id}">{$vo.figure_name}</option>
                        {/foreach}
                    </select>

                    <label for="">上传图片</label>
                    <input type="file" name="file">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">保存</button>
            </div>
        </div>
        </form>
    </div>
</div>

    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="file-manager">
                            <!--<h5>显示：</h5>
                            <a href="file_manager.html#" class="file-control active">所有</a>
                            <a href="file_manager.html#" class="file-control">文档</a>
                            <a href="file_manager.html#" class="file-control">视频</a>
                            <a href="file_manager.html#" class="file-control">图片</a>
                            <div class="hr-line-dashed"></div>-->

                            <div class="col-sm-6">
                                <button class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal">
                                    <i class="fa fa-upload"></i>&nbsp;&nbsp;<span class="bold">上传</span>
                                </button>
                            </div>
                            <a onclick="order()" id="btnorder" class="btn btn-info">更新排序</a>
                            <div class="hr-line-dashed"></div>
                            <h5>分类</h5>
                            <ul class="folder-list" style="padding: 0">
                                <li><a href="{:url('scene/index')}"><i class="fa fa-folder"></i> 场景</a>
                                </li>
                                <li><a href="{:url('facade/index')}"><i class="fa fa-folder"></i> 门面</a>
                                </li>
                                <li><a href="{:url('figure/index')}"><i class="fa fa-folder-open"></i> 人物</a>
                                </li>
                                <li><a href="{:url('element/index')}"><i class="fa fa-folder"></i> 元素</a>
                                </li>
                            </ul>
                            <h5 class="tag-title">标签</h5>
                            <ul class="tag-list" style="padding: 0">
                                {if $type == config('enum.figureItemType.head.value')}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.head.value')])}" style="background-color:#52b095;color:white">头部</a>
                                    </li>
                                {else /}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.head.value')])}">头部</a>
                                    </li>
                                {/if}

                                {if $type == config('enum.figureItemType.aboveTheWaist.value')}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.aboveTheWaist.value')])}" style="background-color:#52b095;color:white">上半身</a>
                                    </li>
                                {else /}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.aboveTheWaist.value')])}">上半身</a>
                                    </li>
                                {/if}

                                {if $type == config('enum.figureItemType.lowerBody.value')}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.lowerBody.value')])}" style="background-color:#52b095;color:white">下半身</a>
                                    </li>
                                {else /}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.lowerBody.value')])}">下半身</a>
                                    </li>
                                {/if}

                                {if $type == config('enum.figureItemType.other.value')}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.other.value')])}" style="background-color:#52b095;color:white">人物其他</a>
                                    </li>
                                {else /}
                                    <li><a href="{:url('figureItem/index',
                                            ['type'=>config('enum.figureItemType.other.value')])}">人物其他</a>
                                    </li>
                                {/if}
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-9 animated fadeInRight">
                <div class="row">
                    <div class="col-sm-12">
                        <form id="form" method="post" action="" enctype="multipart/form-data">
                            <input type="hidden" name="id" value="">
                            <input type="file" id="file" name="file" style="display:none;" onchange="showImage();"/>

                            {if $figure_id == 0}
                                <a href="{:url('index', ['type'=>$type])}" class="btn btn-w-m btn-primary">全部</a>
                            {else /}
                                <a href="{:url('index', ['type'=>$type])}" class="btn btn-w-m btn-white">全部</a>
                            {/if}

                            {foreach $figureList as $vo}
                                {if $figure_id == $vo.id}
                                    <a href="{:url('index', ['type'=>$type, 'figure_id'=>$vo.id])}" class="btn btn-w-m btn-primary">{$vo.figure_name}</a>
                                {else /}
                                    <a href="{:url('index', ['type'=>$type, 'figure_id'=>$vo.id])}" class="btn btn-w-m btn-white">{$vo.figure_name}</a>
                                {/if}
                            {/foreach}

                            <br><br>
                        <div class="layer-photos-demo">
                            {foreach $list as $vo}
                                <div class="file-box">
                                    <div class="file">
                                        <span class="corner"></span>

                                        <div class="image">
                                            <img alt="image" class="img-responsive" src="{$vo.icon_path}">
                                        </div>
                                        <div class="file-name">
                                            <div class="col-sm-8">
                                                <input type="number" class="form-control" name="{$vo.id}" value="{$vo.sort}">
                                            </div>
                                            <a onclick="remove('{$vo.id}')" class="btn btn-white btn-bitbucket">
                                                <i class="fa fa-times"></i>
                                            </a>
                                            <!--<small>添加时间：2014-10-13</small>-->
                                        </div>
                                    </div>
                                </div>
                            {/foreach}
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{include file="public/footer" /}
<script type="text/javascript" src="/static/admin/webupload/webuploader.min.js"></script>
<script src="/static/admin/js/select2.full.min.js"></script>
<script type="text/javascript">

layer.photos({
  photos: '.layer-photos-demo'
 ,anim: false //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
function remove(id) {
    layer.confirm('确认删除吗', {icon: 3}, function(index){
        layer.close(index);
        window.location.href = "{:url('delete')}?id=" + id;
    });
}

  function order() {
    $('#form').ajaxSubmit({
      url: '{:url("order")}',
      type: 'POST',
        beforeSend:function() {
            // 显示loading
            index2 = layer.load(0, {
                shade: [0.3,'#fff']
            });
            $("#formSubmit").attr('type', 'button')
        },
        success: function(data){

            if (data['code'] != 1) {
                layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                    layer.close(index)
                });
                $("#formSubmit").attr('type', 'submit')
                return false;
            }

            layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                window.location.reload();
            });
        },
        error: function(XmlHttpRequest, textStatus, errorThrown){
            layer.msg('error!',{icon:1,time:1000});
        },
        complete:function() {
            // 隐藏loading
            layer.close(index2);
        }
    });
  }

    //以下为官方示例
    $().ready(function () {

        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#signupForm").validate({
            rules: {
                relative_x: {
                    required: true,
                },
                file: {
                    required: true
                }
            },
            focusCleanup:true,
            submitHandler:function(form){

                $(form).ajaxSubmit({
                    type: 'post',
                    url: "{:url('addFigureItem')}",
                    beforeSend:function() {
                        // 显示loading
                        index2 = layer.load(0, {
                            shade: [0.3,'#fff']
                        });
                        $("#formSubmit").attr('type', 'button')
                    },
                    success: function(data){

                        if (data['code'] != 1) {
                            layer.msg(data.msg,{icon:2,time:1000,shade: 0.1,}, function(index){
                                layer.close(index)
                            });
                            $("#formSubmit").attr('type', 'submit')
                            return false;
                        }

                        layer.msg(data.msg,{icon:1,time:1000,shade: 0.1,}, function(index){
                            window.location.reload();
                        });
                    },
                    error: function(XmlHttpRequest, textStatus, errorThrown){
                        layer.msg('error!',{icon:1,time:1000});
                    },
                    complete:function() {
                        // 隐藏loading
                        layer.close(index2);
                    }
                });
            }
        });


    });

</script>
</body>
</html>